<template>
  <div class="channel-edit">
      <van-cell center :border="false">
          <template #title class="channel-title">我的频道</template>
          <van-button @click="isClear = !isClear" type="danger" plain round size="mini">{{isClear ? '完成':'编辑'}}</van-button>
      </van-cell>
      <van-grid  :gutter="10">
          <van-grid-item :class="{active : index == $props.active }" @click="onUserChannelClick(index)" :icon="isClear && index !== 0 ? 'clear' : ''" class="grid-item" v-for="(channel,index) in channels.userChannels" :key="channel" :text="channel.name"></van-grid-item>
      </van-grid>

      <van-cell center :border="false">
          <template #title class="channel-title">频道推荐</template>
      </van-cell>
      <van-grid :gutter="10">
          <van-grid-item @click="onAddItem(channel)" class="grid-item" v-for="channel in recommentChannels" :key="channel" :text="channel.name"></van-grid-item>
      </van-grid>
  </div>
</template>

<script lang="ts">
import { ref, reactive, defineComponent, onMounted, computed, getCurrentInstance } from 'vue'
import { getAllChannels  } from 'api/channel'
export default defineComponent({
    props:{
        userChannels:{
            type:Array,
            required:true
        },
        active:{
            type:Number,
            required:true
        }
    },
    emits:['close','update-active'],
    setup(props,ctx){
        let isClear = ref<boolean>(false)
        let channels = reactive<any>({
            userChannels:props.userChannels,
            allChannels:[]
        })


        const loadAllChannels = async () => {
            let resp = await getAllChannels()
            if(resp && resp.status == 200) {
                let { data } = resp.data
                channels.allChannels = data.channels
            }
        }

        const onAddItem = (channel:any) => {
            channels.userChannels.push(channel)
        }

        const deleteChannel =(index:number | string | symbol) => {
            if(index as number  <= props.active) {
                ctx.emit('update-active', props.active - 1)
            }
            channels.userChannels.splice(index,1)
        }

        const switchChannel = (index:number | string | symbol) => {
            ctx.emit('update-active',index)
            ctx.emit("close")
        }

        const onUserChannelClick = (index:number | string | symbol) => {
            if(isClear.value && index as number !== 0) {
                console.log(isClear);
                deleteChannel(index)
            } else {
                switchChannel(index)
            }
        }

        onMounted(() => {
            loadAllChannels()
        })

        //推荐频道列表
        const recommentChannels = computed(() => {
            //所有频道 - 我的频道 = 剩下的推荐频道
            return channels.allChannels.filter((channel:any) => {
                return !channels.userChannels.find((userChannel:any) => {
                    return userChannel.id === channel.id
                })
            })
        })

        return {
            channels,
            onAddItem,
            isClear,
            recommentChannels,
            onUserChannelClick
        }
    }
})
</script>

<style lang="scss" scoped>
    .channel-edit {
        padding-top: 54px;

        .channel-title {
            font-size: 16px;
            color: #333;
        }

        .grid-item {
            width: 80px;
            height: 43px;
        ::v-deep .van-grid-item__content {
                background-color: #f4f5f6;

                .van-grid-item__text {
                    font-size: 14px;
                    color: #222;
                }
            }

            ::v-deep .van-grid-item__icon {
                position: absolute;
                top: -5px;
                right: -9px;
                font-size: 20px;
                color: #ccc;
                z-index: 999;
                margin-top: 0;
            }
        }

        .active {
                ::v-deep .van-grid-item__text {
                    color: red!important;
                }
        }

 
    }
</style>